<template>
    <div class="container-fluid">
        <TopBar></TopBar>
        
        <div class="box">
            <div>
                <img class="img-fluid"  src="../assets/contentLog/42.png" alt="345678">
            </div>
            <div class="log-box">
                <TransitionGroup name="log_list" tag="div">
                    <div v-for="article in articleStore.articleLogs" :key="article.article_id">
                        <div @click="goArticleDetails(article)">
                            <Log :log="article"> </Log>
                        </div>
                    </div>
                </TransitionGroup>
            </div>
        </div>
        <br><br>
    <br>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import { ArticleStore } from '../store/articelStore/index'
import {onMounted} from "vue"
import { useRouter } from 'vue-router'
const router = useRouter() 
const articleStore = ArticleStore()

//文章详情页面 
function goArticleDetails(article:any) {
  //直接存储，方便取
  articleStore.article_now = article
  //跳转
    router.push({
        path: 'articleDetails'
    })
}


//获取文章日志
async function getArticlesLogs(){
   await articleStore.getArticlesLogs();

}

getArticlesLogs();

onMounted(() => {
   
  
  
  
    
})
</script>
<style lang="scss" scoped>

.container-fluid {
    background-color: $passlink-bg-color;
    text-align: center;
    .box {
        
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;
        
        .log-box{
      
        .log_list-move, /* 对移动中的元素应用的过渡 */
            .log_list-enter-active,
            .log_list-leave-active {
                transition: all 0.5s ease;
            }
            .log_list-enter-from,
            .log_list-leave-to {
                opacity: 0;
                transform: translateX(30px);
            }
            /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
            .log_list-leave-active {
                position: absolute;
            }
        }
    }
}
</style>
